<template>
    <!-- 登录页 -->
    <div class="login">
        <div class="center" v-if="flag">
            <div class="top">
                <img src="../assets/login/logo.png" alt="" class="logo" />
                <img src="../assets/login/logo文字.png" alt="" class="logo-text" />
            </div>
            <div class="c">
                <img @click="wx_submit" src="../assets/login/wx_login.png" alt="" class="logo-wx" />
            </div>

            <div class="bottom">
                <p> &copy; 赛纳吉网络咨询服务有限公司 版权所有 |
                    <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank"></a>
                </p>
            </div>
        </div>

        <!-- 二维码 -->
        <div class="ewm" v-else>
            <div class="center">
                <div class="ewm-top">
                    <div class="close" @click="wx_close">x</div>
                    <div class="img">
                        <img src="../assets/login/wx_logo.png" alt="" /> 请使用微信扫一扫
                    </div>
                </div>
                <div class="ewm-center">
                    <img src="../assets/login/36020221024161922786.png" alt="" />
                </div>
                <div class="ewm-bottom"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            flag: true,
        };
    },
    created() { },
    mounted() { },
    methods: {
        wx_submit() {
            console.log(22);
            this.flag = false;
            localStorage.setItem('token', '1')
            setTimeout(() => {
                this.$router.push('/homepage')
            }, 300);
        },
        wx_close() {
            console.log(111);
            this.flag = true;
        },
    },
};
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

img {
    vertical-align: middle;
}

.login {
    width: 100vw;
    height: 100vh;
    // width: 100%;
    // height: 100%;
    background: url("../assets/login/login_bg.png") no-repeat;
    background-size: 100% 100%;
}

.center {
    width: 833px;
    height: 943px;
    background: url("../assets/login/login_bottom.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;

    >div {
        flex: 1;
    }

    .top {
        display: flex;
        flex-direction: column;
        position: relative;

        .logo {
            width: 104px;
            height: 120px;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .logo-text {
            width: 198px;
            height: 21px;
            position: absolute;
            top: 90%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .c {
        .logo-wx {
            width: 393px;
            height: 70px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
    }

    .bottom {
        position: relative;

        p {
            text-align: center;
            // transform: scale(10px);
            font-size: 16px;
            margin-top: 10%;
        }
    }
}

.ewm {
    .ewm-top {
        font-size: 28px;
        height: 40%;
        width: 100%;
        position: relative;

        .img {
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
        }

        img {
            width: 37px;
            height: 37px;
        }

        .close {
            position: absolute;
            top: 25%;
            right: 12%;
            width: 35px;
            height: 35px;
            text-align: center;
            font-size: 24px;
            z-index: 10;
        }
    }

    .ewm-center {
        height: 40%;
        width: 100%;
        position: relative;

        img {
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            width: 237px;
            height: 237px;
        }
    }

    .ewm-bottom {
        height: 20%;
    }
}
</style>
